Vue.component("qfTable", {
    props:{
        columns:{
            type: Array,
            required: true
        },
        data:{
            type: Array,
            required: true
        },
    },
    template:`<table border="1px" cellpadding="10" cellspacing="0">
            <thead>
                <tr>
                    <th v-for=" thItem in columns ">{{thItem.title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for=" trItem in data ">
                    <td v-for="thItem in columns">
                       
                        <template v-if="thItem.render">
                            <span v-html="thItem.render(trItem)"></span>
                        </template>
                        <template v-else="thItem.render">
                            {{trItem[thItem.key]}}
                        </template>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>`

});